<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
  // const elementResizeDetectorMaker = require("element-resize-detector");
  export default {
    mounted() { },
    computed: {
      // ...mapGetters(["echartsColor"]),
    },
    watch: {
      data: "drawLine", // 数值变化是更新图表
      color: "drawLine", // 数值变化是更新图表
      name: "drawLine", // 数值变化是更新图表
      value: "drawLine", // 数值变化是更新图表
    },
    props: {
      color: {
        // 传入的颜色
        type: Array | Object,
        default: function () {
          return [];
        },
      },
      name: {
        // y轴标题
        type: String,
        default: '',
      },
      value: {
        // 数据
        type: [String,Number],
        default: '',
      },
      data: {
        // y轴标题
        type: [String, Number],
        default: 12,
      },
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        try {
          var cw = document.body.clientWidth;
          this.$nextTick(() => {
            let myChart = this.$echarts.init(this.$refs.echarts_box);

            const data = Number(this.value);
            const name =  this.name;

            let option = {
              // backgroundColor: "#001e45",
              grid: {
                left:"3%",
                right:"3%",
                top: "80%",
                // bottom: "56",
              },
              xAxis: {
                show: false,
                type: "value",
                boundaryGap: [0, 0],
                max: 100,

              },
              yAxis: {
                type: 'category',
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                position: "right",
                axisLabel: {
                  padding: [10, 10, 0, 0],
                  align: "right",
                  verticalAlign: "top",
                  textStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                    fontFamily: "PingFang SC",
                  },
                  formatter: '{value}%'
                },
                data: [data]
              },
              series: [
                {// 进度
                  data: [
                    { name: name, value: data }
                  ],
                  name: name,
                  type: 'bar',
                  barWidth: 6,
                  // showBackground: true,
                  // backgroundStyle: {
                  //   borderRadius: 10,
                  //   color: "rgba(0,114,255,0.2)",
                  //   borderColor: 'rgba(18,197,255,0.5)',
                  //   borderWidth: 2,
                  //   opacity: 1,
                  // },
                  itemStyle: {
                    normal: {
                      barBorderRadius: 30,
                      color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
                        {
                          offset: 1,
                          color: 'rgba(54,204,253,0.2)',
                        },
                        {
                          offset: 0,
                          color: 'rgba(54,204,253,1)',
                        },
                      ]),
                    },
                    // color: {
                    //   x: 1,
                    //   y: 0,
                    //   x2: 0,
                    //   y2: 0,
                    //   colorStops: [{
                    //     offset: 1,
                    //     color: 'rgba(54,204,253,0.2)' // 0% 处的颜色
                    //   }, {
                    //     offset: 0,
                    //     color: 'rgba(54,204,253,1)' // 100% 处的颜色
                    //   }],
                    // },
                    // borderRadius: 11,
                  },
                  label: {
                    show: true,
                    position: "insideTopLeft",
                    textStyle: {
                      color: "rgba(255,255,255,1)",
                      fontSize: 14,
                      fontFamily: "PingFang SC",
                    },
                    padding: [10, 0, 0, 0],
                    formatter: '{b}'
                  },
                  emphasis: {
                    disabled: true,
                  },
                  // markPoint: {
                  //   symbol: "image://",
                  //   symbolSize: [23, 34],
                  //   label: { show: false },
                  //   symbolOffset: [0, -20],
                  //   data: [
                  //     { name: '最大值', type: 'max' }
                  //   ],
                  // }
                },
                {// 进度
                  data: [
                    { name: name, value: data }
                  ],
                  name: name,
                  type: 'bar',
                  barWidth: 10,
                  barGap: '-130%',
                  data:[100],
                  itemStyle: {
                    normal: {
                      color: 'rgba(28, 128, 213, 0)',
                      borderWidth: 1,
                      borderColor: 'rgba(18,197,255,0.5)',
                      barBorderRadius: 30,
                    },
                  },


                },
                // {
                //   name: '圆',
                //   type: 'scatter',
                //   data: [
                //     { name: name, value: data }
                //   ],
                //   label: "none",
                //   symbolSize: 9,
                //   itemStyle: {
                //     borderColor: '#FFFFFF',
                //     borderWidth: 2.5,
                //     color: "rgba(255, 225, 167, 1)",
                //     opacity: 1,
                //   },
                //   z: 2
                // }
              ]
            };

            myChart.setOption(option);
            /* 大小自适应 */
            window.addEventListener("resize", () => {
              // h = this.$refs.echarts_box.offsetHeight;
              // console.log(h);
              myChart.resize();
            });
            myChart.resize();
          });
        } catch (e) {
          console.log(e);
          // 错误处理代码片段
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts_box {
    width: 100%;
    height: 100%;
    position: relative;

    .Nodata {
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
</style>